<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<title>套餐管理</title>

<link rel="stylesheet" href="layui/css/layui.css">
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --> 

</head>
<body>

<!-- @*Table表格层*@ -->
<!-- @*创建一个table实例   在页面放置一个元素 ，然后通过 table.render() 方法指定该容器 -->
<table class="layui-hide" id="test" lay-filter="test"></table>


<!-- 头部工具栏 -->
<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container" style="float:left;">
		<button class="layui-btn layui-btn-radius layui-btn-normal" lay-event="getCheckData">选中行数据</button>
		<button class="layui-btn layui-btn-radius layui-btn-normal" lay-event="getCheckLength">已选数目</button>
		<button class="layui-btn layui-btn-radius layui-btn-normal" lay-event="isAll">是否全选</button>
		<button class="layui-btn layui-btn-radius layui-btn-warm" lay-event="add"><i class="layui-icon">&#xe654;</i> 添加</button>
		<button class="layui-btn layui-btn-radius layui-btn-danger" lay-event="delMore"><i class="layui-icon">&#xe640;</i> 批量删除</button>
	</div>
	<!-- @*搜索层*@ -->
	<div class="demoTable" style="float:left;">
		<%-- <div class="input-group-btn" style="float:left;width:100px;">
			<select name="keytype" id="keytype" class="layui-btn">
				<option value="pid" >套餐编号</option>
				<option value="pname" selected="selected">套餐名称</option>
			</select>
        </div> --%>
		<div class="layui-inline">
			<input class="layui-input" name="pgid" id="pgid" style="width:200px;" placeholder="关键词 [ 关联套餐编号 ]" autocomplete="off">
		</div>
		<div class="layui-inline">
			<input class="layui-input" name="pgname" id="pgname" style="width:200px;" placeholder="关键词 [ 关联套餐名称 ]" autocomplete="off">	
		</div>
		<button class="layui-btn" lay-event="search" id="search" data-type="reload">搜索</button>
	</div>
</script>

<!-- @*右侧工具栏  在Table中使用 toolbar声明一个 Id  放置在任意位置皆可*@ -->
<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
	<!-- <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> -->
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!-- 表格数据的商品状态列显示值转换 -->             
<script type="text/html" id="statetemplet">
{{# if(d.state=="1"){"上架"}}
<span style="color:chocolate;">{{"上架"}}</span>
{{# } else {"下架"}}
<span style="color:black;">{{"下架"}}</span>
{{#　}}}
</script>

 
<script>
//创建实例  要想数据初始化 这里必须要写
layui.use(['table', 'layer', 'form'], function () {
	var table = layui.table;
	layer = layui.layer;
	form = layui.form;
	

	//表格内容********************************Begin********************************************************************
	table.render({
		elem: '#test'  //表格容器的id
		,id: 'contenttable'
		,url:'showpackage.do'
			//接口地址。默认会自动传递两个参数：?page=1&limit=30（该参数可通过 request 自定义） page 代表当前页码、limit 代表每页数据量
		,even: true  //隔行换色，默认false不开启
		,toolbar: '#toolbarDemo'
		,title: '套餐信息数据表'
		,cols: [[
			{type: 'checkbox', fixed: 'left'}
			,{field:'pgid', title:'套餐编号', width:100, fixed: 'left', unresize: true, sort: true}
			,{field:'pgname', title:'套餐名称', width:180, edit: 'text'}
			,{field:'pgtype', title:'套餐类型', width:100, edit: 'text', sort: true}
			,{field:'marketprice', title:'市场价/元', width:100, sort: true}
			,{field:'price', title:'优惠价/元',width:100, sort: true}
			,{field:'number', title:'库存量', width:80}
			,{field:'state', title:'状态', width:70, sort: true, templet:"#statetemplet"}
			,{field:'introduction', title:'说明', width:500}
			,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:120}
		]]
		,page: true  //开启分页
		/*,page: { //自定义分页，支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem）
			layout: ['first','prev', 'page', 'next', 'skip','count','limit'] //自定义分页布局
		    //,curr: 1 //设定初始在第 1 页
		    ,groups: 3 //只显示 3 个连续页码
		    ,first: '首页' //false不显示首页
		    ,last: '尾页' //false不显示尾页
		} */
		,limit: 15  //设置一页数据数量
		,limits: [5,10,15,20,100,200,500,1000 ] //设置分页选项
		,loading: true  //是否显示加载条（默认：true）。如果设置 false，则在切换分页时，不会出现加载条。
		,request: {  //请求的参数
			pageName: 'page' //页码的参数名称，默认：page
		    ,limitName: 'limit' //每页数据量的参数名，默认：limit
		}
		,response: {  //自定义返回的数据格式
			statusName: 'code' //规定数据状态的字段名称，默认：code
			,statusCode: 0 //规定成功的状态码，默认：0
			,msgName: 'msg' //规定状态信息的字段名称，默认：msg
			,countName: 'count' //规定数据总数的字段名称，默认：count
			,dataName: 'data' //规定数据列表的字段名称，默认：data
		}
		,done: function(res, page, count){
			//如果是异步请求数据方式，res即为你接口返回的信息。
			//如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
			
			//分类显示中文名称
			$("[data-field='pgtype']").children().each(function(){
					if($(this).text()=='1'){
					   $(this).text("报单购货").css("color","black");
					}else if($(this).text()=='2'){
					   $(this).text("套餐购货").css("color","green");
					}else if($(this).text()=='3'){
					   $(this).text("单品购货").css("color","blue");
					}else if($(this).text()=='4'){
					   $(this).text("组合购货").css("color","orange");
					}
			});
 
			//console.log(res);
			//得到当前页码
			//console.log(page); 
			//console.log(limit); 
			//得到数据总量
			//console.log(count);
		} 
	});
	//表格内容********************************END********************************************************************
	
	//搜索 ----------------------------------------------- Begin-----------------------------------------------------------
	function Search(){
		var $ = layui.$, active = {
			reload: function () {
			    var pgid = $('#pgid').val();//套餐编号
			    var pgname = $("#pgname").val();//套餐名称
			    
			    //执行重载
			    table.reload('contenttable', {
					method: 'post'
			    	, page: {curr: 1 }  //重新从第 1 页开始
			    	,url: '<%=basePath%>getpackagebykey.do'  //后台做模糊搜索接口路径
					, where: { 
						pgid: pgid,
						pgname: pgname
			    	}  //向后台传参  
			    });
			}
		};
		//这个是用于创建点击事件的实例
		$('#search').on('click', function (){
		    var type = $(this).data('type');
		    active[type] ? active[type].call(this) : '';
		});
	}
	//搜索 ----------------------------------------------- End-----------------------------------------------------------

	//头工具栏事件
	table.on('toolbar(test)', function(obj){
		var checkStatus = table.checkStatus(obj.config.id);
		switch(obj.event){
		case 'getCheckData':
			var data = checkStatus.data;
			layer.alert(JSON.stringify(data));
			break;
		case 'getCheckLength':
			var data = checkStatus.data;
			layer.msg('已选中：'+ data.length + ' 个');
			break;
		case 'isAll':
			layer.msg(checkStatus.isAll ? '全选': '未全选');
			break;
		case 'add':
			layer.open({
				type: 2,
				title: '添加套餐',
				skin: 'layui-layer-molv',
				shadeClose: false,
				shade: 0.6,
				area: ['60%', '80%'],
				maxmin: true,
				content: '<%=basePath%>/m_admin/addpackage.jsp',//跳转的页面
				//btn: ['确定', '取消'],  //确认按钮
				cancel: function (index) {
				    $(".layui-laypage-btn").click();//这里用于关闭Open时触发回调函数  刷新父页面数据  一定要引入Jquery
				}
			});
			break;
		case 'delMore':
			var data = checkStatus.data;
			var checklength=data.length;
			if(checklength<1) {
				layer.msg('请至少选中一项后再进行批量操作！');
			} else {
				layer.confirm('当前操作不可撤销，确认是否继续？',{
					 time: 10000, //10s后自动关闭
	                 btn: ['确定', '取消'],
	                 yes: function(index){
	 					//layer.close(index);  //关闭弹窗
	                	//var obj=JSON.stringify(data);
	 					var pgids="";
	 					for (var i = 0; i < checklength; i++) {
	 						pgids+=data[i].pgid+",";
	 					}
	 					pgids=pgids.substring(0,pgids.length-1);
	 					
	 					//删除数据在这里可以使用Ajax异步  就和平常使用一样简单
	 					$.post("<%=basePath%>deletemorepackage.do", { pgids: pgids }, function (res){
	 					    if (res.code == "1") {
	 					        layer.msg(res.msg, { icon: 1, time: 1500 }, function () {
	 					            //obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
	 					            table.reload('idTest',{});
	 					            //window.location.reload();
	 					            $(".layui-laypage-btn").click();
	 					        });
	 					    } else {
	 					        layer.msg(res.msg, { icon: 2, time: 1500 });
	 					    }
	 					});
	                 }
				});
			}
			break;
		case 'search':
			Search();
			break;
		};
	});
	
	
	//监听工具条 ----------------------------------------------- Begin-----------------------------------------------------------
	table.on('tool(test)', function (obj) {    //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
	    var data = obj.data; //获得当前行数据
		//console.log(obj)
	    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
	    var tr = obj.tr; //获得当前行 tr 的DOM对象
	 	
	    if (layEvent == 'detail'){    	
	        layer.open({
	            type: 2,
	            title: '套餐详情',
	            skin: 'layui-layer-molv',
	            shadeClose: false,
	            shade: 0.6,
	            area: ['60%', '80%'],
	            maxmin: true,
	            content: '<%=basePath%>/m_admin/updatepackage.jsp?pgid='+data.pgid, //跳转的页面
	            cancel: function (index) {
	                $(".layui-laypage-btn").click();//这里用于关闭Open时触发回调函数  刷新父页面数据  一定要引入Jquery
	            }
	
	      });
	      //注：在这里我不就做修改界面了  这里这只是一个弹出框  弹出你的修改页面  Content中你自定义自己的页面路径并传参数
	    } else if(obj.event === 'edit'){
	        layer.prompt({formType: 2, value: data.price }, function(value, index){
	        	obj.update({ price: value });
	        	layer.close(index);
	  		});
	    } else if(obj.event === 'del'){//删除数据
	  	  layer.confirm('确认删除当前套餐吗？', function(index){
	         //删除数据在这里可以使用Ajax异步  就和平常使用一样简单
	         $.post("<%=basePath%>deletepackage.do", { pgid: data.pgid }, function (res){
	             if (res.code == "1") {
	                 layer.msg(res.msg, { icon: 1, time: 1500 }, function () {
	                     obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
	                     $(".layui-laypage-btn").click();
	                 });
	                 //layer.close(index);  //关闭弹窗
	             } else {
	                 layer.msg(res.msg, { icon: 2, time: 1500 });
	             }
	         });
	  	  });
	    }
	});
	//监听工具条 ----------------------------------------------- ENd-----------------------------------------------------------
	
});

</script>

</body>
</html>